iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 2
0
Modern Web

少年學Vue,如隙中窺月系列 第 2

[Day2] 第一個 Vue 應用程式

  • 分享至 

  • xImage
  •  

先來個 Hello Word

首先記得要先載入 Vue 檔案


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

宣告一個變數名稱 app 的 Vue 物件

var app = new Vue({});

在 html 檔案內增加一個 div 區塊,並且設定區塊的 id 為 app

<body>
    <div id="app">
    </div>
</body>

在變數 app Vue 物件中新增 el ,亦即 element(元素) 的縮寫,它的值即是要綁定的元素,接著透過 id 將 div 畫面和 Vue 物件做綁定

var app = new Vue({
    el:'#app'
})

開啟 Vue 開發工具的 Component 會看到一個 Root 元件代表綁定成功

https://i.imgur.com/6CFCBQy.png

在變數 app Vue 物件中新增 data 物件,它的值就是我們要在畫面顯示的資料

var app = new Vue({
      el:'#app',
      data:{}
 })

在 data 物件中宣告一個變數 text ,它的值設定為字串 Hello World

var app = new Vue({
        el:'#app',
        data:{
            text:'Hello World'
        }
})

此時打開 Vue 除錯工具會發現多了 data 裡面有我們存放的變數

https://i.imgur.com/ctWB2Ew.png

最後一在 div 區塊中用 {{}} 來顯示變數 text

<body>
    <div id="app">
       {{text}}
    </div>
</body>

成功建立自己第一個 Vue 應用程式

https://i.imgur.com/PIQNVxN.png

延伸概念

資料與畫面雙向綁定

當我們點擊 Vue 開發者工具的 text 變數值兩下,可以修改它的值,此時會發現畫面的資料也會隨著變數值改變而改變。

https://i.imgur.com/uyxVJLd.png

使用 class 的方式綁定資料

我們也可以用 class 的方式來綁定資料和畫面,結果會是一樣的,只是通常 id 還是比較常用的方式。

https://i.imgur.com/eKH5EDK.png

建立兩個 Vue 應用程式

我們用上述的方式再建立另一個應用程式,會發現 Vue 除錯工具會出現兩個 Root 元件,而就算兩個 Vue 應用程式使用相同的變數名稱 text ,最後渲染在畫面的值也不會出錯,彼此應用程式資料內的值是獨立的。

https://i.imgur.com/h9gcrXK.png

應用程式綁定限制

一個 Vue app 只能綁定一個元素,像是如果把 app1 Vue 應用綁定在兩個元素上,第二個元素的 text 資料就不會成功渲染

https://i.imgur.com/AauXhvZ.png

巢狀應用程式

Vue 不能將一個 Vue 應用包進另一個 Vue 應用,如果這樣錯會出錯

https://i.imgur.com/KKBAypn.png


上一篇
[Day1] 建立 Vue 開發環境
下一篇
[Day3] MVVM 架構
系列文
少年學Vue,如隙中窺月30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

我要留言

立即登入留言